<template>
  <div class="z-row" style="display: flex">
    <div class="echartList z-col" style="width: 25%">
      <div class="chart-item" style="height: 28%">
        <BoxContainer :title="'历年沃柑、蜜糖橘、橘子产量'">
          <BarChart :config="barchartConfig" />
          <!--                 <div class="placeholder">图表加载中...</div>-->
        </BoxContainer>
      </div>
      <div class="chart-item" style="height: 28%">
        <BoxContainer :title="'近期预估用户增长量'">
          <div class="placeholder">图表加载中...</div>
        </BoxContainer>
      </div>
      <div class="chart-item" style="height: 28%">
        <BoxContainer :title="'当前系统评价分布'">
          <PieChart2 :config="barchartConfig" />
        </BoxContainer>
      </div>
    </div>
    <div class="echartList z-col" style="width: 45.83%">
      <div class="chart-item" style="height: 32.5%">
        <div class="placeholder">图表加载中...</div>
      </div>
      <div class="chart-item" style="height: 60.8%">
        <BoxContainer :title="'历年各地区柑橘产量变化'">
          <PlaceLineChart :config="barchartConfig" />
        </BoxContainer>
      </div>
    </div>
    <div class="echartList z-col" style="width: 25%">
      <div class="chart-item" style="height: 43%">
        <BoxContainer :title="'标题....'">
          <WaterChart />
        </BoxContainer>
      </div>
      <div class="chart-item" style="height: 43%">
        <BoxContainer :title="'标题....'">
          <HorizontalCompar />
        </BoxContainer>
      </div>
    </div>
  </div>
</template>

<script setup>
import BoxContainer from '../components/Container.vue'
import BarChart from '@/components/chart/BarChart.vue'
import HorizontalCompar from '@/components/chart/HorizontalCompar.vue'
import PlaceLineChart from '@/components/chart/PlaceLineChart.vue'
import PieChart2 from '@/views/DataVisual/chart/PieChart2.vue'
import WaterChart from '@/views/DataVisual/chart/WaterChart.vue'
const barchartConfig = {
  width: '430px',
  height: '250px'
}
</script>

<style scoped>
@import './layout.scss';
</style>
